import { useCallback } from 'react';
import { Space } from 'antd';
import ChartItem from '@/components/ChartItem';
import { getKdataApi, getSimpleDatacApi } from '@/api/data';

const AppMainCharts = () => {
  const createKdataOption = useCallback((data) => {
    const types = ['服装', '食品销量', '电子产品', '文化娱乐']
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: types,
      },
      xAxis: {
        type: 'category',
        data: data.x,
      },
      yAxis: {
        type: 'value',
      },
      series: types.map((item, index) => {
        return {
          data: data.val[index],
          type: 'line',
          smooth: true,
          stack: 'Total',
          name: item,
        }
      }),
    }
  })
  const createSimpleOption = useCallback((data) => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: data.map((item) => item.x),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: data.map((item) => item.val),
          type: 'bar',
        },
      ],
    }
  })
  return (
    <Space direction="vertical" style={{ width: '100%', display: 'flex', marginTop: '30px' }}>
      <ChartItem getDataApi={getKdataApi} createOption={createKdataOption} />
      <ChartItem getDataApi={getSimpleDatacApi} createOption={createSimpleOption} />
    </Space>
  )
}
export default AppMainCharts
